<template>
  <div class="chat-container">
    <div class="sidebar-wrapper">
      <ChatSidebar 
        :currentChatId="currentChatId"
        @select-chat="handleSelectChat"
        @new-chat="handleNewChat"
      />
    </div>
    
    <div class="chat-main">
      <div v-if="!currentChatId" class="empty-chat">
        <div class="welcome-container centered-welcome">
          <img src="/boshi-logo.png" alt="博识 Logo" class="logo" />
          <h2 class="welcome-title">我是博识，很高兴见到你!</h2>
          <p class="welcome-text">我是你的博识助手，拥有丰富的知识库和智能检索能力。无论是法律条款、大学排名、金融数据还是美食推荐，我都能快速为你找到精准答案。请告诉我你的问题吧...</p>
          
          <!-- 添加预设提问示例 -->
          <div class="example-questions">
            <h3>你可以试试以下提问:</h3>
            <div class="questions-container">
              <div class="question-item" @click="handleExampleQuestion('贪污罪怎么定刑')">
                <el-icon><ChatLineRound /></el-icon>
                <span>贪污罪怎么定刑</span>
              </div>
              <div class="question-item" @click="handleExampleQuestion('2023年软科中国大学排名第1名的院校是哪个')">
                <el-icon><School /></el-icon>
                <span>2023年软科中国大学排名第1名的院校是哪个</span>
              </div>
              <div class="question-item" @click="handleExampleQuestion('什么样的人容易患糖尿病')">
                <el-icon><FirstAidKit /></el-icon>
                <span>什么样的人容易患糖尿病</span>
              </div>
              <div class="question-item" @click="handleExampleQuestion('日料有哪些推荐的餐厅')">
                <el-icon><Food /></el-icon>
                <span>日料有哪些推荐的餐厅</span>
              </div>
              <div class="question-item" @click="handleExampleQuestion('2008年金融危机期间黄金价格表现如何？')">
                <el-icon><Money /></el-icon>
                <span>2008年金融危机期间黄金价格表现如何？</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="chat-content">
        <div class="messages-container" ref="messagesContainer">
          <!-- 如果没有消息，显示欢迎提示 -->
          <div v-if="!currentChat.messages || currentChat.messages.length === 0" class="welcome-message">
            <img src="/boshi-logo.png" alt="博识 Logo" class="chat-logo" />
            <h2 class="welcome-title">我是博识，很高兴见到你!</h2>
            <p class="welcome-text">我是你的博识助手，拥有丰富的知识库和智能检索能力。无论是法律条款、大学排名、金融数据还是美食推荐，我都能快速为你找到精准答案。请告诉我你的问题吧...</p>
            
            <!-- 在空聊天时也添加预设提问示例 -->
            <div class="example-questions in-chat">
              <h3>你可以试试以下提问:</h3>
              <div class="questions-container">
                <div class="question-item" @click="handleExampleQuestion('贪污罪怎么定刑')">
                  <el-icon><ChatLineRound /></el-icon>
                  <span>贪污罪怎么定刑</span>
                </div>
                <div class="question-item" @click="handleExampleQuestion('2023年软科中国大学排名第1名的院校是哪个')">
                  <el-icon><School /></el-icon>
                  <span>2023年软科中国大学排名第1名的院校是哪个</span>
                </div>
                <div class="question-item" @click="handleExampleQuestion('什么样的人容易患糖尿病')">
                  <el-icon><FirstAidKit /></el-icon>
                  <span>什么样的人容易患糖尿病</span>
                </div>
                <div class="question-item" @click="handleExampleQuestion('日料有哪些推荐的餐厅')">
                  <el-icon><Food /></el-icon>
                  <span>日料有哪些推荐的餐厅</span>
                </div>
                <div class="question-item" @click="handleExampleQuestion('2008年金融危机期间黄金价格表现如何？')">
                  <el-icon><Money /></el-icon>
                  <span>2008年金融危机期间黄金价格表现如何？</span>
                </div>
              </div>
            </div>
          </div>
          
          <ChatMessage
            v-for="(message, index) in currentChat.messages"
            :key="index"
            :message="message"
          />
          
          <!-- 思考中动画 -->
          <div v-if="loading" class="thinking-animation">
            <div class="thinking-avatar">
              <el-avatar src="/boshi-logo.png" :fit="'contain'">B</el-avatar>
            </div>
            <div class="thinking-content">
              <div class="thinking-dots">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <div class="thinking-text">正在思考中...</div>
            </div>
          </div>
        </div>
        
        <div class="input-container">
          <ChatInput 
            :loading="loading" 
            @send="handleSendMessage" 
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, nextTick, watch } from 'vue';
import { useStore } from 'vuex';
import ChatSidebar from '../components/ChatSidebar.vue';
import ChatMessage from '../components/ChatMessage.vue';
import ChatInput from '../components/ChatInput.vue';
import { ChatLineRound, School, FirstAidKit, Food, Money } from '@element-plus/icons-vue';

export default {
  name: 'Chat',
  
  components: {
    ChatSidebar,
    ChatMessage,
    ChatInput,
    ChatLineRound,
    School,
    FirstAidKit,
    Food,
    Money
  },
  
  setup() {
    const store = useStore();
    const messagesContainer = ref(null);
    
    // 从Vuex获取状态
    const loading = computed(() => store.state.loading);
    const currentChatId = computed(() => store.state.currentChatId);
    const currentChat = computed(() => store.getters.getCurrentChat || { messages: [] });
    
    // 处理选择聊天
    const handleSelectChat = (chatId) => {
      store.dispatch('selectChat', chatId);
      scrollToBottom();
    };
    
    // 处理新建聊天
    const handleNewChat = () => {
      store.dispatch('createChat');
      scrollToBottom();
    };
    
    // 处理示例问题点击
    const handleExampleQuestion = (question) => {
      // 如果没有当前对话，先创建一个
      if (!currentChatId.value) {
        store.dispatch('createChat');
      }
      
      // 发送示例问题
      store.dispatch('sendMessage', question);
      nextTick(() => {
        scrollToBottom();
      });
    };
    
    // 处理发送消息
    const handleSendMessage = async (text) => {
      try {
        await store.dispatch('sendMessage', text);
        await nextTick();
        scrollToBottom();
      } catch (error) {
        console.error('发送消息失败:', error);
      }
    };
    
    // 滚动到底部
    const scrollToBottom = () => {
      nextTick(() => {
        if (messagesContainer.value) {
          messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
        }
      });
    };
    
    // 监听消息变化，自动滚动
    watch(() => currentChat.value.messages && currentChat.value.messages.length, scrollToBottom);
    
    // 初始化
    onMounted(() => {
      // 如果没有当前聊天但有历史聊天，选择第一个
      if (!currentChatId.value) {
        const chatHistory = store.getters.chatHistory;
        if (chatHistory.length > 0) {
          handleSelectChat(chatHistory[0].id);
        }
      }
    });
    
    return {
      currentChatId,
      currentChat,
      loading,
      messagesContainer,
      handleSelectChat,
      handleNewChat,
      handleSendMessage,
      handleExampleQuestion
    };
  }
}
</script>

<style scoped>
.chat-container {
  height: 100%;
  display: flex;
  width: 100%;
}

.sidebar-wrapper {
  width: 280px;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  position: relative;
  width: 100%;
  height: 100%;
}

.empty-chat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;
}

.welcome-container {
  text-align: center;
  width: 100%;
  max-width: 600px;
  padding: 20px;
}

.centered-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 120px;
  height: auto;
  margin-bottom: 24px;
  object-fit: contain;
}

.welcome-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #303133;
  font-weight: 500;
}

.welcome-text {
  color: #606266;
  line-height: 1.6;
  font-size: 16px;
}

/* 聊天框内的欢迎信息样式 */
.welcome-message {
  text-align: center;
  padding: 40px 0;
  margin: auto;
  max-width: 480px;
}

.chat-logo {
  width: 90px;
  height: auto;
  margin-bottom: 20px;
  object-fit: contain;
}

.chat-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.input-container {
  width: 100%;
}

/* 示例问题样式 */
.example-questions {
  margin-top: 30px;
  width: 100%;
  max-width: 580px;
}

.example-questions h3 {
  font-size: 16px;
  color: #606266;
  margin-bottom: 16px;
  font-weight: 500;
}

.questions-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.question-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #f4f4f5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.question-item:hover {
  background-color: #e6f6ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-item .el-icon {
  font-size: 20px;
  color: #409eff;
}

.question-item span {
  font-size: 15px;
  color: #303133;
}

/* 在聊天内的示例问题样式 */
.example-questions.in-chat {
  margin-top: 20px;
}

.example-questions.in-chat .question-item {
  padding: 10px 14px;
}

/* 思考中动画样式 */
.thinking-animation {
  display: flex;
  align-items: flex-start;
  margin: 16px 0;
  max-width: 70%;
}

.thinking-avatar {
  margin: 0 12px;
  flex-shrink: 0;
}

.thinking-content {
  background-color: #f4f4f5;
  padding: 10px 16px;
  border-radius: 8px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}

.thinking-dots {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.thinking-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #909399;
  border-radius: 50%;
  margin: 0 3px;
  opacity: 0.6;
  animation: thinkingDots 1.4s infinite ease-in-out;
}

.thinking-dots span:nth-child(1) {
  animation-delay: 0s;
}

.thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.thinking-text {
  font-size: 13px;
  color: #606266;
  text-align: center;
}

@keyframes thinkingDots {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
</style> 